<template>
  <div class="page">
    <div class="contentWrapper">
        <div class="top-search">
            <div class="logo-icon" @click.stop="redirect('Home', {searchTerm: ''})">
            <img src="../imgs/icons/logo-mini.png" alt="">
            </div>
            <div id="searchForm" :class="{focus:isFocusTerm}">
                <div class="searchIcon" @click="focusTerm" v-show="!isFocusTerm">
                    <img class="img" src="../imgs/icons/btn-search.png" alt="search button">
                </div>
                <textarea @keyup.enter="sendSearchRequest()" ref="searchTerm" @focus="changeFocusStatus(true)" @blur="changeFocusStatus(false)" type="text" name="searchTerm" id="searchTerm" v-model="searchTerm">
                </textarea>
                <div ref="hiddenTerm" class="hiddenTerm">{{searchTerm}}</div>
                <div class="cancelBtn" v-show="isFocusTerm && searchTerm && searchTerm != ''" @click.stop="clearTerm">
                    <img src="../imgs/icons/cancel.png" alt="">
                </div>
                <div class="clearFix">

                </div>
            </div>
            <div class="searchBtn" v-show="isFocusTerm" @click.stop="sendSearchRequest()">
                搜索
            </div>
            <div class="clearFix"></div>
        </div>
        <transition name="fadeList">
            <div class="casesList" v-if="casesList[0]">
                <div class="caseItem" v-for="(caseItem, index) in casesList" :key="index">
                    <div class="titles">
                        <div class="parentItem" v-if="caseItem.parent[0] && indexParent >= caseItem.parent.length - 1" v-for="(parentItem, indexParent) in caseItem.parent" :key="indexParent">
                            <div class="currentTittle" :class="{hasChildren:(caseItem.children && caseItem.children.length > 0)}">
                                <span @click="changeCurrentContent(caseItem.content?caseItem.content:false)">{{caseItem.title3}}</span>
                                <div class="parentBtn" v-if="caseItem.parent.length >= 2 && caseItem.parent[caseItem.parent.length - 2].id" @click.stop="backParent(caseItem.parent[caseItem.parent.length - 2].idx, caseItem.parent[caseItem.parent.length - 2].id)">
                                    <img class="icon" src="../imgs/icons/parentBtn.png" alt="">
                                </div>
                            </div>
                        </div>
                        <transition name="fadeList" v-if="!caseItem.a && caseItem.children && caseItem.children.length > 0">
                            <div class="content nodeTree" v-show="currentNodeIndex == index">
                                <ul class="children">
                                    <li @click="changeCurrentQuestion(child.idx,child.id)" class="child" v-for="(child, index) in caseItem.children" :key="index">
                                        <div class="title">{{child.title3}}</div>
                                    </li>
                                </ul>
                            </div>
                        </transition>
                        <div class="explanation" v-if="currentAnswer">
                            <h3><div>法律解答</div></h3>
                            <vue-simple-markdown class="detailMdWrapper" :postrender="postRender" v-if="currentAnswer" :source="currentAnswer"></vue-simple-markdown>
                            <h3><div>法律依据</div></h3>
                            <transition name="fadeList" v-if="caseItem.a && caseItem.children && caseItem.children.length > 0">
                                <div class="content nodeTree" v-show="currentNodeIndex == index">
                                    <detailList class="pc" v-if="!isPhone && pathResTest" :pathRes="pathResTest"></detailList>
                                    <ul class="children" v-if="pathRes" >
                                    <li v-for="(childPath, index) in pathRes" :key="index" class="pathOpen">
                                            <div class="nodeTitle" :class="{selected:index == pathRes.length-1}">
                                                <div :style="getTitleStyle(index)" class="title" :class="{active:index == pathRes.length-1}" @click="setActiveExplain(childPath.idx + ':' + childPath.id)">{{childPath.t}}</div>
                                            </div>
                                            <ul :style="getChildrenStyle(index)" class="children" v-if="index == pathRes.length-1">
                                                <li @click="setActiveExplain(childSubPath.idx + ':' + childSubPath.id)" class="pathClose" v-for="(childSubPath, index) in childPath.children" :key="index">
                                                    <div class="title" :class="{active:childSubPath.active}">{{childSubPath.t}}</div>
                                                    <vue-simple-markdown class="detailMdWrapper" :postrender="postRender" v-if="childSubPath.active" :source="childSubPath.content"></vue-simple-markdown>
                                                </li>
                                            </ul>
                                            <vue-simple-markdown class="detailMdWrapper" :postrender="postRender" v-if="childPath.content" :source="childPath.content"></vue-simple-markdown>
                                        </li>
                                        <!-- <subcontent v-for="(child, index) in caseItem.children" :key="index" :childItem="child" :setActiveExplain="setActiveExplain"></subcontent> -->
                                    </ul>
                                    <ul class="children" v-else-if="isPhone">
                                        <li @click="setActiveExplain(child.idx + ':' + child.id)" class="child top" v-for="(child, index) in caseItem.children" :key="index">
                                            <div class="title" :class="{active:child.active}">{{child.t}}</div>
                                            <vue-simple-markdown class="detailMdWrapper" :postrender="postRender" v-if="child.active" :source="child.content"></vue-simple-markdown>
                                        </li>
                                        <!-- <subcontent v-for="(child, index) in caseItem.children" :key="index" :childItem="child" :setActiveExplain="setActiveExplain"></subcontent> -->
                                    </ul>
                                </div>
                            </transition>
                            <vue-simple-markdown class="detailMdWrapper" :postrender="postRender" v-else-if="caseItem.a && !caseItem.children && caseItem.content" :source="currentContent"></vue-simple-markdown>
                        </div>
                    </div>
                    <div class="content detail" v-if="!caseItem.a && currentContent && (!caseItem.children || caseItem.children.length <= 0)">
                        <vue-simple-markdown class="detailMdWrapper" :postrender="postRender" v-if="currentContent" :source="currentContent"></vue-simple-markdown>
                    </div>
                    <div class="question" v-if="currentTip">
                        <div class="question-text">{{currentTip}}</div>
                        <div class="clearFix"></div>
                    </div>
                    <div class="redirectQuestion" @click="redirect('Survey')" v-if="currentTip">
                        马上开始直线智能咨询
                    </div>
                </div>
                <!-- <div class="footer" :class="{fixed:(!isFocusTerm && casesList[0] && (!casesList[0].children || casesList[0].children.length < 12))}" v-if="casesList[0]">
                    <div class="kMap">
                        > 进入知识地图
                    </div>
                    <div class="question">
                        <div class="question-text">小直猜您要咨询离婚时房屋归属和分割相关法律？</div>
                        <div class="clearFix"></div>
                    </div>
                    <div class="redirectQuestion" @click="redirect('Survey')">
                        马上开始直线智能咨询
                    </div>
                </div> -->
            </div>
        </transition>
        <div class="waitData" v-if="!casesList[0]">
            {{waitText}}
        </div>
    </div>
  </div>
</template>
<script>
var vm;
import detailList from "./components/detailList";
export default {
    components: {
        detailList
    },
    data() {
        return {
            searchTerm: '',
            qid: '',
            idx:'',
            path:'',
            pathRes:null,
            pathResTest:null,
            currentNodeIndex: 0,
            casesList: [],
            currentContent: "",
            currentAnswer: "",
            isFocusTerm: false
        }
    },
    computed: {
        waitText() {
            if (!vm.searchTerm || vm.searchTerm =="") {
                return "请先搜索..."
            } else {
                return "等待数据..."
            }
        },
        currentTip () {
            return (vm.pathRes && vm.pathRes.tip) ||
                    (vm.casesList[0] && vm.casesList[0].tip) ||
                    false;
        },
        isPhone(){
            return document.body.clientWidth < 920;
        }
    },
    watch: {
        $route() {
            console.log('change--------')
            vm.pathRes = null;
            vm.loadPage();
        },
        searchTerm() {
            this.$nextTick(()=>{
                this.setTermDomHeight();
            })
        }
    },
    created: function(){
        vm = this;
        vm.loadPage();
    },
    mounted() {
    },
    methods: {
        getTitleStyle(index) {
            let style = "margin-top:";
            style += this.isPhone?".1rem;":"4px;";
            style += "margin-left:";
            style += this.isPhone?index*.1:index*16;
            style += this.isPhone?"rem;":"px;";
            return style;
        },
        getChildrenStyle(index) {
            let style = "margin-top:";
            style += this.isPhone?".1rem;":"4px;";
            style += "margin-left:";
            style += this.isPhone?(index+1)*.1:(index+1)*16;
            style += this.isPhone?"rem;":"px;";
            return style;
        },
        loadPage() {
            vm.searchTerm = vm.$route.query.term;
            vm.qid = vm.$route.query.qid;
            vm.idx = vm.$route.query.idx;
            vm.path = vm.$route.query.path;
            vm.sendQuestionRequest();
        },
        postRender(html) {
            return he.decode(html);
        },
        clearTerm() {
            this.searchTerm = "";
            this.focusTerm();
        },
        sendSearchRequest() {
            if(vm.searchTerm) {
                vm.searchTerm = vm.searchTerm.trim();
                vm.$router.push({ name: 'Home', params: {'searchTerm':this.searchTerm}});
            }
        },
        focusTerm() {
            this.$refs.searchTerm.focus();
        },
        changeFocusStatus(status) {
            this.$nextTick(()=>{
                this.isFocusTerm = status;
                this.setTermDomHeight();
            })
        },
        setTermDomHeight() {
            this.$refs.searchTerm.style.height = "auto";
            //不然会不断撑大
            if (this.isFocusTerm) {
                if(this.isPhone) {
                    this.$refs.searchTerm.style.height = this.$refs.hiddenTerm.scrollHeight/100 + "rem";
                }else {
                    this.$refs.searchTerm.style.height = this.$refs.hiddenTerm.scrollHeight + "px";
                }
            }
        },
        backParent(parentIdx, parentId) {
            vm.changeCurrentQuestion(parentIdx, parentId);
        },
        redirect: function (pageName, params) {
            if (params) {
                vm.$router.push({ name: pageName, params: params });
            } else {
                vm.$router.push({ name: pageName });
            }
        },
        changeCurrentNodeIndex(index) {
            if (vm.currentNodeIndex == index) {
                vm.currentNodeIndex = -1;
            }else {
                vm.currentNodeIndex = index;
            }
        },
        changeCurrentContent(content) {
            if (content) {
                vm.currentContent = content;
            }else {
                vm.currentContent = '';
            }
        },
        sendQuestionRequest() {
            if (vm.qid) {
                axios.get(global.SERVER + '/api/id/'+vm.idx+'/'+vm.qid)
                    .then(function (response) {
                        vm.casesList = [];
                        vm.casesList.push(response.data[0]);
                        if (vm.casesList[0] && vm.casesList[0].content) {
                            vm.currentContent = vm.casesList[0].content;
                        }
                        if (vm.casesList[0] && vm.casesList[0].a) {
                            vm.currentAnswer = vm.casesList[0].a;
                        }else {
                            vm.currentAnswer = "";
                        }
                        vm.renderPath();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }            
        },
        renderPath() {
            if (vm.path) {
                let pathArray = vm.path.split(",");
                pathArray = pathArray.map((el)=>{
                    return el.split(":");
                });
                let requestArray = pathArray.map((el)=>{
                    return axios.get(global.SERVER + '/api/id/'+el[0]+'/'+el[1]);
                });
                axios.all(requestArray).then((res)=>{
                    this.renderPathPc(res);
                    let dataRes = res.map((el)=>{
                        return el.data[0];
                    });
                    vm.pathRes = dataRes;
                })
                .catch(function (error) {
                    console.log(error);
                });
            }else {
                this.renderPathPc();
            }
        },
        renderPathPc(res) {
            const arrTemp = [this.casesList[0]];
            if (res) {
                res.forEach((el, index) => {
                    arrTemp.unshift(el.data[0]);
                });
                arrTemp.forEach((childEl, index) => {
                    if (index < arrTemp.length - 1) {
                        const dataParent = arrTemp[index+1];
                        dataParent.children.forEach((parentEl, index) => {
                            if (parentEl.id == childEl.id) {
                                parentEl.children = childEl.children || [];
                            }
                        });
                    }
                });
            }
            this.pathResTest = arrTemp[arrTemp.length - 1].children;
        },
        changeCurrentQuestion(idx, id) {
            vm.$router.push({ name: 'Case', query: {idx:idx, qid: id, term: vm.searchTerm}});
        },
        setActiveExplain(pathTarget) {
            vm.$router.push({ name: 'Case', query: {idx:vm.idx, qid: vm.qid, term: vm.searchTerm, path: vm.getNewPath(pathTarget)}});
            console.log(pathTarget);
        },
        getNewPath(pathTarget) {
            let newPath;
            let oldPath = vm.$route.query.path || "";
            let oldPathArray = oldPath.split(",");
            let indexTarget = oldPathArray.indexOf(pathTarget);
            if (indexTarget > -1) {
                let newPathArray = oldPathArray.slice(0,indexTarget+1);
                newPath = newPathArray.join(",");
            }else {
                newPath = oldPath?oldPath + "," + pathTarget:pathTarget;
            }
            return newPath;
        }
    }
}
</script>
<style lang="scss" scoped>
@media screen and (min-width: 920px) {
    .contentWrapper {
        max-width: 920px;
        margin: 0 auto;
    }
    .fadeList-enter-active, .fadeList-leave-active {
    transition: opacity .3s ease;
    }
    .fadeList-enter, .fadeList-leave-active {
    opacity: 0
    }
    .logo-icon {
        cursor: pointer;
        margin: 42px 57px;
        float: left;
        img {
            width: 104px;
        }
    }
    .top-search {
    border-bottom: 1px solid #F6F6F6;
    background-color: #fff;
    }
    #searchForm {
        float: left;
        overflow: hidden;
        position: relative;
        width: 685px;
        height: 53px;
        margin: 68px auto 0;
        padding: 14px 12px;
        border: 1px solid #F66001;
        border-radius: 5px;
        box-sizing: border-box;
        #searchTerm {
            overflow: hidden;
            border: none;
            color: #000;
            background: transparent;
            min-height: 20px;
            height: 20px;
            width: 88%;
            margin-left: .6px;
            line-height: 20px;
            font-size: 20px;
            float: left;
            caret-color: #F66001;
            &:focus {
            outline:none;
            width: 535px;
            }
        }
        .hiddenTerm {
            border: none;
            color: #000;
            background: transparent;
            width: 88%;
            margin-left: 6px;
            line-height: 20px;
            font-size: 20px;
            float: left;
            visibility: hidden;
            position: absolute;
            z-index: -9;
            caret-color: #F66001;
            height: 0;
        }
        .cancelBtn {
            visibility: hidden;
            position: absolute;
            bottom: 2px;
            right: 4px;
        }
        .searchIcon {
            padding: 2px;
            float: left;
            .img {
                width: 18px;
                height: 18px;
            }
        }
        &.focus {
            width: 565px;
            height: auto;
        }
        }
        .searchBtn {
            cursor: pointer;
            float: left;
            margin: 68px 0 68px 24px;
            font-size: 20px;
            height: 53px;
            line-height: 53px;
            color: #F66001;
        }
    .casesList {
        box-sizing: border-box;
        text-align: left;
        margin: 0 auto 0 228px;
        padding-top: 23px;
        height: fill-available;
        .title {
            font-size: 16px;
            color: #929297;
            div {
                padding-bottom: 4px;
                border-bottom: 5px solid #f66001;
                display: inline-block;
            }
        }
        .currentTittle {
            font-size: 18px;
            color: #ba2319;
            background: url(../imgs/icons/dot-list.png) 0 center no-repeat;
            background-size: 8px;
            padding-left: 20px;
            &.hasChildren {
                background: url(../imgs/icons/downFlesh-list.png) 0 center no-repeat;
                background-size: 10px 5px;
            }
        }
        .explanation {
            font-size: 16px;
            // padding-bottom: 1.4rem;
            .pc + ul div{
                display: none;
                &.detailMdWrapper {
                    display: block;
                }
            }
            .nodeTree {
                position: relative;
                &>.children {
                    width: 40%;
                }
                .nodeTitle.selected {
                    background: #f66001;
                    .title, .active {

                    font-weight: 400;
                    color: #fff;
                    }
                }
                .detailMdWrapper {
                    margin: 0;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 58%;
                    margin-bottom: 24px;
                }
            }
            h3 {
                margin-top: 60px;
                font-size: 24px;
                color: #f66501;
                border-bottom: 1px solid #979797;
                div {
                    padding-bottom: 4px;
                    border-bottom: 5px solid #f66001;
                    display: inline-block;
                }
            }
            .children {
                padding: 0;
                .active {
                    color: #333;
                    font-weight: 700;
                    margin-top: 8px;
                }
            }
            .detailMdWrapper {
                margin: 20px 5px;
            }
            .pathOpen {
                .title {
                    background: url(../imgs/icons/fleshDownOrange.png) 0 center no-repeat;
                    background-size: 8px;
                    padding: 4px 0 4px 14px;
                } 
            }
            .pathClose {
                .title {
                    cursor: pointer;
                    background: url(../imgs/icons/fleshRightOrange.png) 0 center no-repeat;
                    background-size: 5px;
                    padding: 4px 0 4px 14px;
                } 
            }
        }
        .detail {
            margin-top: 16px;
            font-size: 16px;
            line-height: 1.6;
            color: #929297;
            padding: 8px 20px;
            background-color: #fff;
            .detailWrapper {
                padding-bottom: 140px;
            }
        }
        .children {
            padding-left: 26px;
            list-style: none;
            margin: 15px 0 0;
            .child {
                cursor: pointer;
                background: url(../imgs/icons/fleshRightOrange.png) 0 center no-repeat;
                background-size: 5px;
                font-size: 16px;
                padding: 4px 0 4px 14px;
                color: #929297;
            }
        }
        .parentBtn {
            float: right;
            .icon {
                width: 18px;
                height: 18px;
            }
        }
    }
    .waitData {
        margin-top: 180px;
        font-size: 42px;
        color: rgba(0,0,0,0.1);
    }
    .footer {
        text-align: center;
        &.fixed {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #fff;
        }
        .kMap {
            display: block;
            text-align: right;
            padding-right: .16rem;
            color: #bbb;
            font-size: .14rem;
        }
    }
        .question {
            display: none;
        }
        .redirectQuestion {
            content: url(../imgs/icons/toSurvey.png);
            margin: 40px 0;
            float: right;
        }
    .clearFix {
    clear: both;
    }
}
@media screen and (max-width: 919px) {
    .fadeList-enter-active, .fadeList-leave-active {
    transition: opacity .3s ease;
    }
    .fadeList-enter, .fadeList-leave-active {
    opacity: 0
    }
    .logo-icon {
    margin: .12rem .1rem;
    float: left;
    img {
        width: .36rem;
    }
    }
    .top-search {
    border-bottom: 1px solid #F6F6F6;
    background-color: #fff;
    }
    #searchForm {
        float: left;
        overflow: hidden;
        position: relative;
        margin: .12rem .1rem;
        height: .38rem;
        width: 2.9rem;
        box-sizing: border-box;
        background: #efeff0;
        border: 1px solid #F66001;
        border-radius: 5px;
        padding: .11rem;
        #searchTerm {
            border: none;
            color: #000;
            background: transparent;
            min-height: .16rem;
            width: 88%;
            margin-left: .06rem;
            line-height: .16rem;
            font-size: .16rem;
            float: left;
            caret-color: #F66001;
            &:focus {
            outline:none;
            width: 2.22rem;
            }
        }
        .hiddenTerm {
            border: none;
            color: #000;
            background: transparent;
            width: 88%;
            margin-left: .06rem;
            line-height: .16rem;
            font-size: .16rem;
            float: left;
            visibility: hidden;
            position: absolute;
            z-index: -9;
            caret-color: #F66001;
            height: 0;
        }
        .cancelBtn {
            position: absolute;
            bottom: .02rem;
            right: .04rem;
        }
        .searchIcon {
            padding: .02rem;
            float: left;
            .img {
                width: .14rem;
                height: .14rem;
            }
        }
        &.focus {
            width: 2.52rem;
            height: auto;
        }
    }
    .searchBtn {
        float: left;
        margin: .12rem 0;
        font-size: .16rem;
        height: .38rem;
        line-height: .38rem;
        color: #F66001;
    }
    .casesList {
        box-sizing: border-box;
        text-align: left;
        background-color: #F6F6F6;
        margin: 0 auto;
        padding-top: .15rem;
        height: fill-available;
        .titles {
            margin: 0 .1rem .15rem;
            padding: .06rem .16rem;
            background: #fff;
            border-radius: .06rem;
        }
        .currentTittle {
            font-size: .14rem;
            color: #ba2319;
            background: url(../imgs/icons/dot-list.png) 0 center no-repeat;
            background-size: .04rem;
            padding-left: .16rem;
            &.hasChildren {
                background: url(../imgs/icons/downFlesh-list.png) 0 center no-repeat;
                background-size: .1rem .05rem;
            }
        }
        .explanation {
            font-size: .14rem;
            // padding-bottom: 1.4rem;
            .children {
                padding: 0;
                .active {
                    color: #333;
                    font-weight: 700;
                    margin-top: .08rem;
                }
            }
            .detailMdWrapper {
                margin: .1rem 0 .2rem;
            }
            .pathOpen {
                .title {
                    background: url(../imgs/icons/fleshDownOrange.png) 0 center no-repeat;
                    background-size: .08rem;
                    padding: .04rem 0 .04rem .14rem;
                } 
            }
            .pathClose {
                .title {
                    background: url(../imgs/icons/fleshRightOrange.png) 0 center no-repeat;
                    background-size: .05rem;
                    padding: .04rem 0 .04rem .14rem;
                } 
            }
        }
        .detail {
            margin-top: .16rem;
            font-size: .14rem;
            line-height: 1.6;
            color: #929297;
            padding: .08rem .2rem;
            background-color: #fff;
            .detailWrapper {
                padding-bottom: 1.4rem;
            }
        }
        .children {
            padding-left: .26rem;
            list-style: none;
            margin: .15rem 0 0;
            .child {
                background: url(../imgs/icons/fleshRightOrange.png) 0 center no-repeat;
                background-size: .04rem;
                font-size: .14rem;
                padding: .04rem 0 .04rem .12rem;
                color: #929297;
            }
        }
        .parentBtn {
            float: right;
            .icon {
                width: .16rem;
                height: .16rem;
            }
        }
    }
    .waitData {
        margin-top: 2.8rem;
        font-size: .42rem;
        color: rgba(0,0,0,0.1);
    }
    .footer {
        text-align: center;
        &.fixed {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #fff;
        }
        .kMap {
            display: block;
            text-align: right;
            padding-right: .16rem;
            color: #bbb;
            font-size: .14rem;
        }
    }
        .question {
            margin-top: .14rem;
            font-size: .14rem;
            color: #929297;
            display: block;
            text-align: center;
        }
        .redirectQuestion {
            width: 2rem;
            text-align: center;
            height: .28rem;
            line-height: .28rem;
            border-radius: .14rem;
            font-size: .14rem;
            color: #fff;
            background-color: #F66001;
            margin: .05rem auto .34rem;
        }
    .clearFix {
    clear: both;
    }
}
</style>
